<template>
  <div>
    <van-tabs v-model:active="active">
      <van-tab v-for="item in foodList" :title="item.name" :key="item.id">
        <div
          class="cateList animate__animated animate__fadeInDown"
          v-for="e in item.sub_class"
          :key="e.id"
        >
          <ul class="list">
            <li class="item">
              <a href="" class="item_box">
                <img :src="e.icon" alt="" />
                <span>{{ e.name }}</span>
              </a>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const foodList = computed(() => {
      return store.state.food.foods;
    });
    onMounted(() => {
      store.dispatch({
        type: "food/getFoodList",
      });
    });
    return {
      foodList,
    };
  },
});
</script>
<style lang="stylus" scoped>
html, body, .food {
  height: 100%;
  width: 100%;
}

ul, li {
  list-style: none;
}

* {
  padding: 0;
  margin: 0;
}

.food-nav {
  /deep/.van-tabs__wrap {
    height: 0.44rem;
    z-index: 80;
    zoom: 1;
    position: fixed;
    top: 44px;
    width: 100%;
    background: #fff;
    transform-origin: center;
    text-align: center;
  }

  .nullbox {
    height: 0.88rem;
    width: 100%;
  }

  /deep/.van-tabs__content {
    background: #fff;
    border-bottom: solid 7px #f5f5f5;
    padding: 0.84rem 0 0.1rem 0;
  }
}

/deep/.cateList {
  .list {
    .item {
      width: 25%;
      float: left;
      text-align: center;
      -webkit-transition: all 0.6s cubic-bezier(0.4, 0.68, 0.15, 1) 0s;
      -webkit-transform: translateY(0) translateX(0);
      transform: translateY(0) translateX(0);
      opacity: 1;

      .item_box {
        display: block;
        padding-top: 10px;

        img {
          display: block;
          width: 60%;
          margin: auto;
        }

        span {
          color: #333;
          font-size: 12px;
          display: block;
          line-height: 30px;
        }
      }
    }
  }
}

/deep/.van-tabs__content {
  overflow-y: scroll;
  height: 100%;
}

a {
  text-decoration: none;
  color: #333;
}
</style>
